<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ page import="com.park.layout.Blocks" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%-- JSTL表达式（判断，循环，输出） --%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <%-- 方法表达式（字符串截取，替换） --%>
<%@ taglib uri="http://www.wanwei.com/tags/tag" prefix="layout" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<layout:override name="<%=Blocks.BLOCK_HEADER_CSS%>">
    <link href="Content/style/common/style.min.css?v=${static_resource_version}" rel="stylesheet" type="text/css">
    <style>
        .banner{    border: 1px solid #E5E5E5; padding: 20px;}
    </style>
</layout:override>

<layout:override name="<%=Blocks.BLOCK_HEADER_SCRIPTS%>">
    <script src="Content/dist/jquery-form.js?v=${static_resource_version}"></script>
    <script>
        $(document).ready(function () {
            <c:if test="${fn:length(bannerInfos) == 0}">
                addBanner();
            </c:if>
        });

        function addBanner() {
            $.ajax({
                url: "Views/Personality/Personalitys_child.jsp",
                async: false,
                success: function (data) {
                    $("#banners").append(data);
                }
            });
        }

        function updateBanner(obj){
            var form =  $($(obj).closest("form"));
            if(!form.find(".bannerSeq").val()){
                alert("请输入排序值");
                return;
            }
            $(obj).prop("disabled", true);
            form.ajaxSubmit({
                type: "post",
                dataType: "json",
                data: form.serialize(),
                url: "<%=basePath%>passport/savePersonality",
                success: function (res) {
                    alert(res.message);
                    if(res.code == 1) {
                        //form.append('<input type="" value="'+res.data.bannerId+'" />');
                        window.location.reload();
                    }
                    $(obj).prop("disabled", false);
                },
                error: function (msg) {}
            });
        }

        function deleteBanner(personalityId, obj){
            if(window.confirm("确认删除吗？")) {
                $.post("<%=basePath%>passport/newDeletePersonality", {personalityId: personalityId}, function (res) {
                    if (res.code == 1) {
                        $(obj).closest(".banner").remove();
                    } else {
                        alert(res.message);
                    }
                });
            }
        }
    </script>
</layout:override>

<layout:override name="<%=Blocks.BLOCK_BODY%>">
    <div class="container-fluid" style="text-align: left">
        <div id="center_form" class="form-horizontal" novalidate>
            <div class="panel panel-default">
                <div class="panel-heading">首页个性推荐编辑</div>
                <div class="panel-body">
                    <div class="col-sm-offset-2 col-sm-8" style="padding-bottom: 200px;">
                        <div id="banners">

                            <c:forEach var="personality" items="${personalityInfos}">
                            <div class="banner">
                            <form enctype="multipart/form-data">
                                <input type="hidden" name="personalityId" value="${personality.personalityId}" />
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">
                                        个性推荐图片地址
                                    </label>

                                    <div class="col-sm-8">
                                        <div style="float: left">
                                            <input type="file" class="js-img" name="fileImg1" class="form-control"  />
                                        </div>
                                        <div style="width: 80px; height: 80px; float: left" onmouseover="$(this).next().show();" onmouseout="$(this).next().hide();">
                                            <img src="${personality.personalityImg}" style="width: 100%; height: 100%;" />
                                        </div>
                                        <div style="position: absolute; z-index: 99999; top: 90px; display: none;">
                                            <img class="col-xs-3" src="${personality.personalityImg}" style="width: 100%; height: 100%;" />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">
                                        个性推荐标题
                                    </label>

                                    <div class="col-sm-8">
                                        <input type="text" name="personalityTitle" class="form-control bannerUrl" placeholder="个性推荐标题" value="${personality.personalityTitle}" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">
                                        个性推荐链接地址
                                    </label>

                                    <div class="col-sm-8">
                                        <input type="text" name="personalityUrl" class="form-control bannerUrl" placeholder="个性推荐链接地址，如http://www.baidu.com" value="${personality.personalityUrl}" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">
                                        个性推荐排序
                                    </label>

                                    <div class="col-sm-8">
                                        <input type="text" name="personalitySeq" class="form-control bannerSeq" placeholder="个性推荐排序，例如10，值越大越靠前" value="${personality.personalitySeq}" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="text-center" style="padding-top: 20px;">
                                        <button type="button" class="btn btn-success password-confirm" onclick="updateBanner(this)">
                                            <span class="glyphicon glyphicon-ok"></span> 保 存
                                        </button>
                                        <button type="button" class="btn" style="width: 100px; margin-left: 30px;" onclick="deleteBanner('${personality.personalityId}', this)">
                                            <span class="glyphicon"></span> 删除
                                        </button>
                                    </div>
                                </div>
                            </form>
                            </div>
                            </c:forEach>

                        </div>

                        <div class="form-group">
                            <div class="text-center" style="padding-top: 50px;">
                                <button type="button" class="btn" style="width: 150px; margin-left: 30px; background-color: wheat;" onclick="addBanner()">
                                    <span class="glyphicon"></span> 增加个性推荐
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</layout:override>

<c:import url="../Shared/Layout.jsp">
    <c:param name="title" value=""/>
</c:import>
